<template>
  <div>
    <div class="table-page-search-box">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item label="">
              <a-tree-select
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择分类"
                allow-clear
                tree-default-expand-all
                @change="(e) => updateParam(e ? e : 0, 'cat_id')"
              >
                <a-icon slot="suffixIcon" type="search" />
                <a-tree-select-node v-for="item0 of catList" :key="item0.id" :value="item0.id" :title="item0.name">
                  <fragment v-if="item0.children.length > 0">
                    <a-tree-select-node
                      v-for="item1 of item0.children"
                      :key="item1.id"
                      :value="item1.id"
                      :title="item1.name"
                    >
                      <fragment v-if="item1.children.length > 0">
                        <a-tree-select-node
                          v-for="item2 of item1.children"
                          :key="item2.id"
                          :value="item2.id"
                          :title="item2.name"
                        />
                      </fragment>
                    </a-tree-select-node>
                  </fragment>
                </a-tree-select-node>
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="商品类型">
              <a-select v-model="queryParam.product_type" placeholder="请选择" allowClear>
                <a-select-option :value="0">普通商品</a-select-option>
                <a-select-option :value="1">酒店商品</a-select-option>
                <a-select-option :value="2">预约商品</a-select-option>
                <a-select-option :value="3">虚拟商品</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="">
              <div class="flex">
                <a-input v-model="queryParam.name" placeholder="请填写搜索商品名称" />
                <a-button type="primary" @click="getList()">查询</a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      :columns="columns"
      :data-source="list"
      :pagination="{
        current: pageNo,
        total,
        pageSize,
        showSizeChanger: false,
        onChange: this.tablePageChange,
      }"
      :row-key="(record) => record.id"
      :scroll="{ y: 340 }"
    >
      <span slot="select" slot-scope="text, record">
        <a-radio :checked="record.isChecked" @click="change(record)"></a-radio>
      </span>

      <span slot="name" slot-scope="text, record">
        <div class="imgTxt">
          <a-avatar :src="record.cover_pic" shape="square" :size="48" icon="user" />
          <div class="txt">
            <div class="tit">
              <a-tooltip>
                <template slot="title">
                  {{ record.name }}
                </template>
                {{ record.name }}
              </a-tooltip>
            </div>
            <div class="attr">
              <a-tooltip>
                <template slot="title">
                  {{ getAttr(record.attr) }}
                </template>
                {{ getAttr(record.attr) }}
              </a-tooltip>
            </div>
          </div>
        </div>
      </span>
    </a-table>
  </div>
</template>

<script>
import { getUrlParam, getDiyURLText } from '@/utils/utils.js'
import { list as catListApi } from '@/api/goods/cat'
import { list } from '@/api/goods/goods'

const columns = [
  {
    title: '选择',
    scopedSlots: {
      customRender: 'select',
    },
    width: 60,
  },
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100,
  },
  {
    title: '商品信息',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
]

export default {
  data() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 10,
      queryParam: {
        name: '',
        cat_id: 0,
        product_type: '',
      },
      columns,
      list: [],

      catList: [],
    }
  },

  props: {
    link: {
      type: Object,
      default() {
        return null
      },
    },

    mchId: {
      type: Number,
      default: 0,
    },

    params: {
      type: Object,
      default() {
        return {}
      },
    },

    type: {
      type: String,
      default: '',
    },
  },

  computed: {
    getAttr() {
      return (attr) => {
        if (!attr) return ''
        let str = ''
        attr = JSON.parse(attr)
        attr.forEach((e) => {
          str += e.attr_list.map((el) => el.attr_name).join('-') + '、'
        })

        return (str = str.slice(0, str.length - 1))
      }
    },
  },

  watch: {
    type() {
      this.getList()
    },
  },

  created() {
    this.getList()

    catListApi({
      is_show: -1,
      mch_id: this.mchId,
    }).then((res) => {
      this.catList = res.data.list
    })
  },

  methods: {
    // 分页请求
    tablePageChange(e) {
      this.getList(e)
    },

    updateParam(value, type) {
      this.queryParam[type] = value
      this.getList()
    },

    // 获取数据列表
    async getList(pageNo = 1) {
      if (getUrlParam('store_id')) this.store_id = getUrlParam('store_id')
      const hide = this.$message.loading('加载中', 0)
      let { queryParam, pageSize, mch_id, params } = this

      const res = await list({
        ...params,
        ...queryParam,
        pageSize,
        pageNo,
        mch_id,
      })

      if (res.code == 0) {
        let { totalCount, data } = res.data
        this.pageNo = pageNo
        this.total = totalCount
        data = data.map((el) => {
          el.isChecked = false
          return el
        })

        this.list = data || []
      }

      hide()
    },

    change(item) {
      let link = getDiyURLText(this.link, item)

      this.$emit('handle', 'link', link)

      this.$nextTick(() => {
        this.list.forEach((el) => {
          el.isChecked = false
        })
        item.isChecked = true
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.table-page-search-box {
  padding-bottom: 24px;
}

::v-deep {
  .ant-form-item {
    display: flex;
    align-items: center;
  }

  .ant-form-item-control-wrapper {
    flex: 1;
  }

  .ant-form-item-control {
    line-height: 32px;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.imgTxt {
  display: flex;
  width: 100%;

  .txt {
    margin: 2px 0 0 10px;
    flex: 1;
    overflow: hidden;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
  }

  .tit,
  .attr {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
